﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../Content/Admin/css/base.css" rel="stylesheet" />
    <link href="../Content/Admin/css/common.css" rel="stylesheet" />
    <script type="text/javascript" src="../Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function() {
            sidebar("3");
            //alert(window.location.pathname);
        })
        //要显示的a的id号，不需要加sidebar-
        function sidebar(tabhref)
        {
            tabhref = "sidebar-" + tabhref;
            //当前选中项
            var tab = $("#" + tabhref);
            //所有子ul
            var childuls = $("#sidebar li ul");
            //所有存在子ul的同级a标记
            var hrchilds = $("#sidebar>ul>li:has(ul)>a");

            childuls.hide();            
            tab.attr("class", function () {
                if (tab.parents('li').length==1) {
                    return "start";
                } else {
                    tab.parent().parent().show().prev().attr("class", "start");
                    return "sub";
                }
            });
            //===============存在子标签，可点击展开
            $("<span class=\"arrow\"><</span>").appendTo(hrchilds);//添加箭头
            hrchilds.click(function () {
                $(this).next().slideToggle("fast");
            });
        }
    </script>
</head>
<body>
    <div id="sidebar" class="sidebar">
        <ul>
            <li><a id="sidebar-1" class="sidebar-parentbc" href="#"><span><!--图标样式--></span> 标题 <!--<span class="arrow"><</span>--></a></li>
            <li><a id="sidebar-2" class="sidebar-parentbc" href="#"><span><!--图标样式--></span> 标题</a>
                <ul>
                    <li><a  id="sidebar-3" href="#">标题</a></li>
                    <li><a  id="sidebar-4" href="#">标题</a></li>
                    <li><a  id="sidebar-5" href="#">标题</a></li>
                    <li><a  id="sidebar-6" href="#">标题</a></li>
                </ul><!--子菜单-->
            </li>
            <li><a id="A1" class="sidebar-parentbc" href="#"><span><!--图标样式--></span> 标题</a>
                <ul>
                    <li><a  id="A2" href="#">标题</a></li>
                    <li><a  id="A3" href="#">标题</a></li>
                    <li><a  id="A4" href="#">标题</a></li>
                    <li><a  id="A5" href="#">标题</a></li>
                </ul><!--子菜单-->
            </li>
        </ul>
    </div>
</body>
</html>
